<template>
  <el-drawer
    v-model="requireChange_box"
    direction="rtl"
    size="80%"
    destroy-on-close
    :close-on-click-modal="false"
    @close="$emit('close')"
    @open="open"
  >
    <template #title><h4>变更单</h4></template>
    <template #default>
      <div class="flex_js">
        <div>
          <el-button
            v-for="item in type_list"
            :key="item.value"
            :type="type == item.value ? 'primary' : ''"
            @click="(type = item.value), get_list();"
            >{{ item.label }}</el-button
          >
        </div>
        <el-button
          v-if="props.item_form_data.status != 3"
          type="primary"
          @click="
            add_form_data.type = type;
            requireChange_add_box = true;
          "
          >新增需求</el-button
        >
      </div>
      <el-table
        :data="requireChange_list"
        border
        class="m_top10"
        max-height="600"
        :loading="loading"
      >
        <el-table-column label="变更代号" prop="code"></el-table-column>
        <el-table-column label="申请人" prop="applicant"></el-table-column>
        <el-table-column label="接收人">
          <template #default="scope">
            <div v-for="item in (member_list as any)" :key="item.memberId">
              <span v-if="scope.row.receiverId == item.memberId">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="变更类型">
          <template #default="scope">
            <div v-for="item in (changeType_list as any)" :key="item.value">
              <span v-if="scope.row.changeType == item.value">{{ item.label }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="物流发货">
          <template #default="scope">
            <div v-for="item in delivery_list" :key="item.value">
              <span v-if="scope.row.delivery == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column label="变更原因"
          ><template #default="scope">
            <div v-for="item in reason1_list" :key="item.value">
              <span v-if="scope.row.reason1 == item.value"
                >设计补料类-{{ item.label }}</span
              >
            </div>
            <div v-for="item in reason2_list" :key="item.value">
              <span v-if="scope.row.reason2 == item.value"
                >客户补料类-{{ item.label }}</span
              >
            </div>
            <div v-for="item in reason3_list" :key="item.value">
              <span v-if="scope.row.reason3 == item.value"
                >工程补料类-{{ item.label }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <span v-if="scope.row.status == 1">待定</span>
            <span v-if="scope.row.status == 2">已通过</span>
            <span v-if="scope.row.status == 3">已拒绝</span>
            <span v-if="scope.row.status == 4">已下单</span>
          </template></el-table-column
        >
        <el-table-column label="变更简述" prop="changeInfo" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="300" v-if="props.item_form_data.status != 3">
          <template #default="scope">
            <div v-if="scope.row.status == 1">
              <el-button @click="edit_list({ item: scope.row, type: 3 })">通过</el-button>
              <el-button @click="edit_list({ item: scope.row, type: 4 })">拒绝</el-button>
              <el-button @click="edit_list({ item: scope.row, type: 1 })">编辑</el-button>
              <el-button @click="edit_list({ item: scope.row, type: 2 })">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-drawer>
  <el-drawer
    v-model="requireChange_add_box"
    direction="rtl"
    size="50%"
    destroy-on-close
    :close-on-click-modal="false"
    @close="resetForm(addRequireChangeForm)"
  >
    <template #title
      ><h4 v-if="add_form_data.id == ''">新增变更单</h4>
      <h4 v-else>编辑变更单</h4></template
    >
    <template #default>
      <el-form
        :model="add_form_data"
        :rules="rules"
        ref="addRequireChangeForm"
        label-width="120"
        ><el-form-item label="变更单类型" prop="type">
          <el-select
            v-model="add_form_data.type"
            @change="
              () => {
                add_form_data.reason1 = '';
                add_form_data.reason2 = '';
                add_form_data.reason3 = '';
              }
            "
          >
            <el-option
              v-for="item in type_list"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更代号" prop="code">
          <el-input
            v-model="add_form_data.code"
            show-word-limit
            placeholder="请输入"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input
            v-model="add_form_data.applicant"
            show-word-limit
            placeholder="请输入"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item label="接收人">
          <el-select v-model="add_form_data.receiverId" filterable>
            <el-option
              v-for="item in (member_list as any)"
              :value="item.memberId"
              :label="item.name"
              :key="item.memberId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更类型" prop="changeType">
          <el-select v-model="add_form_data.changeType">
            <el-option
              v-for="item in changeType_list"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流发货">
          <el-select v-model="add_form_data.delivery">
            <el-option
              v-for="item in delivery_list"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更原因">
          <el-select v-model="add_form_data.reason1" v-if="add_form_data.type == 1">
            <el-option
              v-for="item in reason1_list"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <el-select v-model="add_form_data.reason2" v-if="add_form_data.type == 2">
            <el-option
              v-for="item in reason2_list"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
          <el-select v-model="add_form_data.reason3" v-if="add_form_data.type == 3">
            <el-option
              v-for="item in reason3_list"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" v-if="add_form_data.id != ''">
          <el-radio
            :disabled="current_status != 1"
            :label="1"
            v-model="add_form_data.status"
            >待定</el-radio
          >
          <el-radio :label="2" v-model="add_form_data.status">通过</el-radio>
          <el-radio :label="3" v-model="add_form_data.status">拒绝</el-radio>
          <el-radio disabled :label="4" v-model="add_form_data.status">已下单</el-radio>
        </el-form-item>
        <el-form-item label="变更简述">
          <el-input
            type="textarea"
            v-model="add_form_data.changeInfo"
            show-word-limit
            placeholder="请输入"
            maxlength="300"
          ></el-input>
        </el-form-item>
        <el-form-item label="变更文件">
          <taskFile
            :item_form_data="props.item_form_data"
            :sourceId="add_form_data.id"
            :isAdd="add_form_data.id == ''"
            :type="3"
          ></taskFile>
        </el-form-item>
        <div class="m_top10 tr">
          <el-button @click="resetForm(addRequireChangeForm)">取消</el-button>
          <el-button
            :loading="btn_loading"
            type="primary"
            @click="submit(addRequireChangeForm)"
            >确定</el-button
          >
        </div>
      </el-form>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { days, formatDate } from "@/utils/check_role"; // 权限校验
import { ref, toRefs, onMounted } from "vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import EventBus from "@/utils/EventBus";
import taskFile from "./taskFile.vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
const addRequireChangeForm = ref<FormInstance>();
const rules = ref({
  code: [{ required: true, message: "请输入变更代号", trigger: "blur" }],
  type: [{ required: true, message: "请选择变更单类型", trigger: "change" }],
  changeType: [{ required: true, message: "请选择变更类型", trigger: "change" }],
});
const type_list = ref([
  { value: 1, label: "设计变更" },
  { value: 2, label: "需求变更" },
  { value: 3, label: "现场返工" },
]);
const reason1_list = ref([
  { value: 1, label: "布排错误" },
  { value: 2, label: "深化错误" },
  { value: 3, label: "其他变更" },
]);
const reason2_list = ref([
  { value: 1, label: "客户变更" },
  { value: 2, label: "3层以上补料" },
  { value: 3, label: "其他变更" },
]);
const reason3_list = ref([
  { value: 1, label: "现场少料" },
  { value: 2, label: "生产错误" },
  { value: 3, label: "质量问题" },
]);
const delivery_list = ref([
  { value: 1, label: "一般" },
  { value: 2, label: "加急" },
  { value: 3, label: "特急" },
]);
const changeType_list = ref([
  { value: "1", label: "客户结构优化补板" },
  { value: "2", label: "客户损坏补板" },
  { value: "3", label: "客户增加辅料" },
  { value: "4", label: "客户增加铁配件" },
  { value: "5", label: "客户楼栋周转" },
  { value: "6", label: "客户增加加固件" },
  { value: "7", label: "深化结构错误" },
  { value: "8", label: "深化配件遗漏" },
  { value: "9", label: "深化做法未明确" },
  { value: "10", label: "深化三维和底图不符" },
  { value: "11", label: "配模碰撞和漏配" },
  { value: "12", label: "配模加工图错误" },
  { value: "13", label: "铁配件算错" },
  { value: "14", label: "清单错误" },
  { value: "15", label: "拼装图错误" },
  { value: "16", label: "配模结构配错" },
]);
const props = defineProps({
  requireChange_box: Boolean,
  item_form_data: Object,
  member_list: Array,
});
const { requireChange_box, member_list } = toRefs(props);
const loading = ref(false);
const requireChange_list = ref([]);
const requireChange_add_box = ref(false);
const add_form_data = ref({
  id: "",
  type: 1,
  code: "",
  taskId: "",
  applicant: "", // 申请人
  changeInfo: "", // 变更简述
  changeType: "", // 变更类型
  delivery: "", // 物流发货
  reason1: "",
  reason2: "",
  reason3: "",
  receiverId: "", // 接收人
  status: 1,
});
const current_status = ref(1);
const open = () => {
  //   console.log(props.item_form_data);
  add_form_data.value.taskId = props.item_form_data.id;
  get_list();
};
const edit_list = (e) => {
  if (e.type == 1) {
    add_form_data.value = {
      id: e.item.id,
      code: e.item.code,
      type: e.item.type - 1,
      taskId: props.item_form_data.id,
      applicant: e.item.applicant, // 申请人
      changeInfo: e.item.changeInfo, // 变更简述
      delivery: e.item.delivery, // 物流发货
      reason1: e.item.reason1,
      reason2: e.item.reason2,
      reason3: e.item.reason3,
      receiverId: e.item.receiverId, // 接收人
      status: e.item.status,
      changeType: e.item.changeType + "",
    };
    current_status.value = e.item.status;
    requireChange_add_box.value = true;
  } else if (e.type == 2) {
    ElMessageBox.confirm("确定删除该记录？", "", {
      closeOnClickModal: false,
      type: "warning",
    })
      .then(() => {
        axios
          .request({
            url: serviceApi.taskChange + "/" + e.item.id,
            method: "delete",
          })
          .then(() => {
            ElMessage.success("操作成功！");
            setTimeout(() => {
              get_list();
            }, 1000);
          })
          .catch((err) => {
            ElMessage.error(err);
          });
      })
      .catch(() => {});
  } else {
    ElMessageBox.confirm(e.type == 3 ? "确定通过该记录？" : "确定拒绝该记录？", "", {
      closeOnClickModal: false,
      type: "warning",
    })
      .then(() => {
        axios
          .request({
            url:
              serviceApi.taskChange + (e.type == 3 ? "/pass/" : "/refuse/") + e.item.id,
            method: "put",
          })
          .then(() => {
            ElMessage.success("操作成功！");
            setTimeout(() => {
              get_list();
            }, 1000);
          })
          .catch((err) => {
            ElMessage.error(err);
          });
      })
      .catch(() => {});
  }
};
const uploadFile = ref();
EventBus.on("uploadFile", (e: any) => {
  //   console.log(e);
  uploadFile.value = e[0];
});
const btn_loading = ref(false);
const submit = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid) => {
    if (valid) {
      //   if (!uploadFile.value) {
      //     ElMessage.error("请上传变更文件");
      //     return;
      //   }
      let fileList = [];
      (uploadFile.value as any).file_data.forEach((i) => {
        let obj = {
          fileConfigId: i.id,
          fileName: i.fileName.length ? i.fileName.toString() : "",
          fileUrl: i.url.length ? i.url.toString() : "",
        };
        fileList.push(obj);
      });
      let data = Object.assign(add_form_data.value, {
        nodeConfigFileVOList: fileList,
      });
      console.log(data);
      if (btn_loading.value) return;
      btn_loading.value = true;
      axios
        .request({
          url: serviceApi.taskChange + (data.id == "" ? "" : "/" + data.id),
          method: data.id == "" ? "post" : "put",
          data: data,
        })
        .then((res) => {
          console.log(res);
          ElMessage.success("操作成功！");
          setTimeout(() => {
            btn_loading.value = false;
            resetForm(formEl);
            get_list();
          }, 1000);
        })
        .catch((err) => {
          btn_loading.value = false;
          ElMessage.error(err);
        });
    }
  });
};
const type = ref(1);
const get_list = () => {
  loading.value = true;
  axios
    .request({
      url: serviceApi.taskChange + "/list",
      method: "post",
      data: {
        taskId: props.item_form_data.id,
        type: type.value,
      },
    })
    .then((res) => {
      console.log(res);
      requireChange_list.value = res.data;
      loading.value = false;
    })
    .catch((err) => {
      ElMessage.error(err);
      loading.value = false;
    });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  add_form_data.value = {
    id: "",
    code: "",
    type: 1,
    taskId: props.item_form_data.id,
    applicant: "",
    changeInfo: "",
    changeType: "",
    delivery: "",
    reason1: "",
    reason2: "",
    reason3: "",
    receiverId: "",
    status: 1,
  };
  requireChange_add_box.value = false;
};
</script>

<style lang="scss" scoped></style>
